<template>
	<div class="">
		<div style="padding:15px;box-shadow: 0 0 15px #5c5f61;border-radius: 5px;">
			<v-toolBar :fullPath="postData.opera" :tableColumns="tableColumns" @changeLie="getChangeLie"
				@getSearchIPArr="getToolBarSearchIPArr" @getSearchIP="getToolBarSearchIP">
			</v-toolBar>
			<el-table v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
				:data="tableDataFn" border style="width: 100%;" stripe>
				<el-table-column type="index" width="50" label="序号"> </el-table-column>
				<template v-for="item in tableColumns">
					<el-table-column :prop="item.prop" :label="item.label" :sortable="item.sortable" :width="item.width"
						align="center" v-if="item.isShow" :key="item.prop">
						<template v-slot="scope">
							{{(scope.row[item.prop]==0?"0":scope.row[item.prop])||'无数据'}}
						</template>
					</el-table-column>
				</template>
			</el-table>
			</div>
		<div style="margin-top: 15px">
			<v-CpuAndIoLoad ref="CpuAndIoLoad"></v-CpuAndIoLoad>
		</div>
	</div>
</template>

<script>
	import {
		fetchData
	} from "@/api/index.js";
	import vPagination from "common/Pagination.vue";
	import vToolBar from "../toolbar/Toolbar.vue";
	import tableColumns from "./ServerInfoTableColumns.js";
	import vCpuAndIoLoad from "../dataBase/components/CpuAndIoLoad.vue";
	import bus from "common/bus.js";

	export default {
		components: {
			vPagination,
			vToolBar,
			vCpuAndIoLoad,
		},
		data() {
			return {
				postData: {
					opera: "ospanlinfo",
					curPage: 1,
					pageSize: 20,
					sort: {
						sortColumn: "",
						sortOrders: "",
					},
					filtersType: "fuzzyquery",
					filters: {
						monid: "",
					},
				},

				postSearchData: {
					opera: "hostconnect",
					curPage: 1,
					pageSize: 2000,
					sort: {
						sortColumn: "monid",
						sortOrders: "asc",
					},
					filtersType: "fuzzyquery",
					filters: {
						//   os_type: "Network",
					},
				},

				tableData: [],
				dataTotal: 0,
				tableColumns: tableColumns,
				SearchIPArr: [],
				searchJson: {},
				SearchIP: "",
				timerName: "ItemMonitorServerHostInfo",
				timerEventName: "ItemMonitortimerServerHostInfo",
				timerInterval: 1000 * 60,
				loading: true,
				selectedMonID: "",
			};
		},
		created() {
			this.selectedMonID = this.$store.getters["ItemMonitorALL/getItem"];

			this.getTableData();

			bus.$emit("timerNewTodo", {
				name: this.timerName,
				eventName: this.timerEventName,
				interval: this.timerInterval,
				intervalNow: 0,
			});

			bus.$on(this.timerEventName, (msg) => {
				if (msg.isGetData) {
					this.getTableData();
				}
			});
		},
		mounted() {
			bus.$on("ItemMonitorALL", (msg) => {
				this.resetData();
				this.selectedMonID = msg;

				this.getTableData();
			});
		},
		computed: {
			// postDataFn() {
			//     return {
			//         postData: JSON.stringify(this.postData)
			//     }
			// },
			tableDataFn() {
				return this.tableData;
			},
			//  timerInterval(){
			//     return Number(this.$store.state.pageRefresh)*1000
			// }
		},
		methods: {
			getTableData() {
				this.loading = true;

				fetchData({
						postSearchData: JSON.stringify(this.postSearchData),
					})
					.then((_) => _.data)
					.then((resultData) => {

						this.postData.filters.monid = resultData.filter(
								(_) => _.IP == this.selectedMonID.IP
							)[0] ?
							resultData.filter((_) => _.IP == this.selectedMonID.IP)[0].MONID :
							"";

						if (!this.postData.filters.monid) {
							this.loading = false;
							return;
						} else {
							fetchData({
								postData: JSON.stringify(this.postData)
							}).then(
								(res) => {
									this.dataTotal = res.dataTotal;
									this.tableData = res.data;

									this.loading = false;
								}
							);
						}
					});
			},
			getPaginationCurPage(val) {
				this.postData.curPage = val;
				this.getTableData();
			},
			getPaginationPageSize(val) {
				// 分页大小改变之后，重置当前页码为 1
				this.postData.curPage = 1;
				this.postData.pageSize = val;

				this.getTableData();
			},
			getToolBarSearchIPArr(arr) {
				// 获取搜索IP关键字
				this.SearchIPArr = arr;

				this.postData.curPage = 1;
				if (this.SearchIPArr.length > 0) {
					this.postData.filters = {
						ip: this.SearchIPArr,
					};
				} else {
					this.postData.filters = {};
				}

				this.getTableData();
			},
			getToolBarSearchIP(str) {
				// 获取搜索IP关键字
				this.SearchIP = str;
				this.postData.curPage = 1;
				this.postData.filters = {
					ip: this.SearchIP,
				};
				this.getTableData();
			},
			getChangeLie(val) {
				// 遍历表格列
				this.tableColumns.map((item, index) => {
					// 列的显示隐藏状态改变
					item.isShow = val.includes(item.label);
				});
			},
			resetData() {
				this.dataTotal = 0;
				this.tableData = [];
			},
		},
		watch: {},
		beforeDestroy() {
			// 页面关闭前，移除定时器任务
			bus.$emit("timerNewTodo", {
				name: this.timerName,
			});
			bus.$off('ItemMonitorALL')
		},
	};
</script>

<style scoped>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
</style>